<template>
    <div class="container">
        <!-- xcollection-top -->
        <div class="xcollection-top bgf mt20">
            <!-- 位置 -->
            <div class="position-x mt20 flex-align">
                <span>您的位置：首页</span>
                <span>></span>
                <span>游戏</span>
            </div>
            <!--  -->
            <div class="xcollection-info flex-align">
                <div class="xcollection-info-img">
                    <img class="img100" src="~/assets/images/img2.png" alt="">
                </div>
                <div class="xcollection-info-con flex1 ovn">
                    <div class="flex-align">
                        <h3 class="fz24 flex1 ellipsis">火柴人游戏大全</h3>
                        <span class="fz14">[共9款游戏]</span>
                    </div>
                    <div class="xcollection-info-cn mt30">
                        <p>角色扮演模拟手游，这是一类非常好玩的角色扮演游戏，各种有意思的角色扮演为大家带来快乐！小编带来了角色扮演模拟手游合集，感兴趣的就快哈哈哈哈,各种有意思的角色扮演为大家带来快乐！小编带来了角色扮演模拟手游合集，感兴趣的就快哈哈哈哈
                            ...</p>
                    </div>
                    <div class="mt30 flex-align fz14">
                        <div class="flex1">相关合集：休闲 益智 动作</div>
                        <div>更新：2019-08-29</div>
                    </div>
                </div>
            </div>
            <!--  -->
        </div>
        <!-- xcollection-list -->
        <div class="xcollection-list bgf mt20">
            <ul class="flex flex-wrap">
                <li class="flex-align" v-for="item in 10" :key="item">
                    <div class="xcollection-limg imgr100">
                        <img class="img100" src="~/assets/images/img2.png" alt="">
                    </div>
                    <div class="flex1 xcollection-linfo ml10">
                        <h3 class="fz16">王者荣耀</h3>
                        <p class="fz12 mt5">赛程竞速|V 1.2版本</p>
                        <p class="fz12 mt5">中文|700MB</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
let pageInfo = useWebsiteStore().getgetMenuInfo('文章');// 调用 store 实例的方法
useSeoMeta({
    title: () => pageInfo.page_title,
    keywords: () => pageInfo.page_keywords,
    description: () => pageInfo.page_description,
})

//切换页码时变化
const handleCurrentChange = (val) => {
    params.page = val;
    getList();
}
</script>
<style lang="scss" scoped>
.position-x {
    position: relative;
    padding: 0 22px;
    height: 44px;
    background: #FFFFFF;
    font-size: 14px;
    color: #626262;
}

.xcollection-top {
    .xcollection-info {
        padding: 20px;

        .xcollection-info-img {
            width: 440px;
            height: 330px;
            border-radius: 10px;
            overflow: hidden;
        }

        .xcollection-info-con {
            padding-left: 40px;
            padding-right: 200px;

            .xcollection-info-cn {
                height: 100px;
                font-size: 16px;
                color: #333333;
                line-height: 20px;
            }
        }
    }
}

.xcollection-list {
    padding-left: 20px;

    li {
        padding: 15px 0;
        width: 235px;
    }

    .xcollection-limg {}

    .xcollection-linfo {}
}
</style>